<template>
  <div style="margin-top: 12px">
    <search-filed :searchList="searchListArr" :selectField="searchFieldTmp" @clear="clearSearch" @close="closeOneField"/>
    <a-table size="middle" class="AcctTable" :rowKey="record=>record.id" style="margin-top: 12px" :scroll="{ x: 1000 }"
      :columns="columns" :dataSource="data"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: getCheckboxProps}"
      :rowClassName="setRowClassName"
      :pagination="{onChange: changePage, ...pagination}" :loading="loading">
      <template slot="title" >
        <TableOperate ref="TableOperate" :valueFileds="valueFileds"
        :searchList="searchListArr" searchTitle="活动名称" :operateBtn="getBtn"
        @searchFormValue="searchFormValue" :noDate="true"  @batchOperation="(id)=> updateStatus(id, selectedRowKeys)"
        />
      </template>
      <template slot="subject" slot-scope="text, record">
        <p :record="record">{{getSubject(text)}}</p>
      </template>
      <template slot="name" slot-scope="text, record">
        <p class="updateText info_text cursor" :record="record" @click="toDetail(record)">{{text}}</p>
      </template>
      <template slot="suitable" slot-scope="text, record">
        <p :record="record">{{text === 'audit' ? '成人' : '儿童'}}</p>
      </template>
      <template slot="age" slot-scope="text, record">
        <p :record="record">{{record.lowAge}} - {{ record.highAge }}岁</p>
      </template>
      <template slot="parents" slot-scope="text, record">
        <p :record="record">{{text === 'Y' ? '是' : '否'}}</p>
      </template>
      <template slot="dateCreated" slot-scope="text, record">
        <p :record="record">{{moment(text).format('YYYY-MM-DD HH:mm:ss')}}</p>
      </template>
      <template slot="sign" slot-scope="text, record">
        <p :record="record" class="info_text cursor" @click="toSignList(record)">查看</p>
      </template>
      <template slot="upload" slot-scope="text, record">
        <p :record="record" class="info_text cursor" @click="toUploadList(record)">查看</p>
      </template>
      <template slot="status" slot-scope="text, record">
        <p class="update flex" v-if="!forbidControl">
          <span v-if="text === 'NEW'">待审核</span>
          <span v-if="text === 'RECRUITING'">招募中</span>
          <!-- <span v-if="text === 'WAIT'">待开始</span>
          <span v-if="text === 'PROCESSING'">进行中</span> -->
          <span v-if="text === 'COMPLETED'">已结束</span>
          <a-popover placement="bottom" v-if="record.auditsStatus === 'NOTPASS' || text === 'CANCELLED'">
            <template slot="content">
              <p>{{ record.reason }}</p>
            </template>
            <template slot="title">
              <span>{{ record.auditsStatus === 'NOTPASS' ? '拒绝原因' : '取消原因' }}</span>
            </template>
            <span v-if="record.auditsStatus === 'NOTPASS'">审核未通过</span>
            <span v-if="text === 'CANCELLED'">已取消</span>
          </a-popover>
        </p>
      </template>
      <template slot="action" slot-scope="text, record">
        <p class="update flex flex_wrap" v-if="!forbidControl">
          <template v-if="['ROLE_ADMIN', 'ROLE_HRBP'].includes(userInfo.role)">
            <a-button type="primary" size="small" @click="updateAuditStatus('PASS', [record.id])" v-if="record.auditsStatus === 'WAIT'">通过</a-button>
            <a-button type="danger" size="small" v-if="record.auditsStatus === 'WAIT'" class="ml10" @click="type = 'reject';rejectVisible = true;rejectIds = [record.id];">拒绝</a-button>
          </template>
          <template v-if="userInfo.role === 'ROLE_VENDOR'">
            <!-- 编辑 取消 结束招募 只在 会员的‘我的活动 ’和 管理员的‘活动管理’出现 -->
            <template v-if="userInfo.id === record.creatorId && (fromPage === 'myCourseList' || fromPage === 'listManage')">
              <a-button type="primary" size="small" v-if="record.auditsStatus === 'NOTPASS' || record.status === 'REFUSE'" @click="edit(record)">编辑</a-button>
              <a-button type="danger" size="small" v-if="record.status === 'NEW' || record.status === 'RECRUITING'" @click="cancelCourse(record)" class="ml10">取消</a-button>
              <a-button type="primary" size="small" v-if="record.status === 'RECRUITING'" @click="completed(record)" class="mr10 mb5 ml10">结束招募</a-button>
            </template>
            <!-- 报名 退课 成为志愿者 取消志愿者 只在会员的‘选课’和‘我的报名’出现 -->
            <template v-if="record.status === 'RECRUITING' && (fromPage === 'selList' || fromPage === 'mySignList')">
              <a-popover placement="bottom" trigger="click" title="请选择参加人" v-if="(hasSign(record).length + (isVolunteer(record) ? 1 : 0)) < myPersonsList.length" :overlayClassName="popoverVisible ? '' : 'popover_hide'">
                <a-button type="primary" size="small" @click="e => { e.preventDefault();curRecord = { ...record, checkList: [] };popoverVisible = true; }" class="mr10 mb5" v-if="(hasSign(record).length + (isVolunteer(record) ? 1 : 0)) < myPersonsList.length">
                  <a-icon type="check" /> 报名
                </a-button>
                <template slot="content" v-if="curRecord.id === record.id">
                  <div class="check_wrap">
                    <a-checkbox-group :options="noSignList" v-model="curRecord.checkList" class="flex flex_column" />
                    <a-button type="primary" size="small" @click="signUp" class="mt10">确定</a-button>
                  </div>
                </template>
              </a-popover>
              <a-popover placement="bottom" trigger="click" title="请选择退课人" v-if="hasSign(record).length" :overlayClassName="popoverVisible ? '' : 'popover_hide'">
                <a-button type="danger" size="small" @click="e => { e.preventDefault();curRecord = { ...record, checkList: [] };popoverVisible = true; }" class="mr10 mb5" v-if="hasSign(record).length">
                  <a-icon type="close" /> 退课
                </a-button>
                <template slot="content" v-if="curRecord.id === record.id">
                  <div class="check_wrap">
                    <a-checkbox-group :options="signNotVolunteerList" v-model="curRecord.checkList" class="flex flex_column" />
                    <a-button type="primary" size="small" @click="cancelSignUp" class="mt10">确定</a-button>
                  </div>
                </template>
              </a-popover>
              <a-popover placement="bottom" trigger="click" :overlayClassName="popoverVisible ? '' : 'popover_hide'">
                <a-button :type="isVolunteer(record) ? 'danger' : 'primary'" size="small" @click="e => { e.preventDefault();curRecord = { ...record, checkList: [] };popoverVisible = true; }">
                  <a-icon type="heart" /> {{isVolunteer(record) ? '取消' : '成为'}}志愿者
                </a-button>
                <template slot="content" v-if="curRecord.id === record.id">
                  <div class="check_wrap">
                    <a-checkbox-group :options="volunteerPersonsList" v-model="curRecord.checkList" class="flex flex_column" />
                    <a-button type="primary" size="small" @click="signVolunteer(!!isVolunteer(record))" class="mt10">确定</a-button>
                  </div>
                </template>
              </a-popover>
            </template>
          </template>
        </p>
      </template>
    </a-table>
    <a-modal v-model="rejectVisible" :title="type === 'cancel' ? '取消原因' : '拒绝原因'" @ok="reject">
      <div v-if="type === 'cancel'">取消后将会对每一名已报名参加活动的会员发送邮件通知。</div>
      <div><span class="error_text">*</span>请填写{{type === 'cancel' ? '取消原因' : '拒绝原因'}}：</div>
      <a-textarea v-model="rejectReason" class="mt10 mb10"></a-textarea>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { mapState } from 'vuex'
import TableOperate from '@/components/SearchList/TableOperate'
import SearchFiled from '@/components/SearchList/SearchFiled'
import { changeCourseAuditStatus, changeCourseStatus, signUp, cancelSignUp } from '@/api/config'
// import { selectTreeList } from '@/api/employingUnit'
import { filterBtn, recordBtn } from '@/util/roles'
const columns = [
  {
    title: '活动名称',
    dataIndex: 'name',
    width: 250,
    key: 'name',
    fixed: 'left',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '学科',
    width: 100,
    dataIndex: 'subject',
    key: 'subject',
    scopedSlots: { customRender: 'subject' }
  },
  {
    title: '授课老师',
    width: 100,
    dataIndex: 'teachers',
    key: 'teachers'
  },
  {
    title: '招募人数',
    width: 100,
    dataIndex: 'recruitNum',
    key: 'recruitNum'
  },
  {
    title: '招募截止日期',
    width: 100,
    dataIndex: 'recruitEndDate',
    key: 'recruitEndDate'
  },
  {
    title: '消耗积分',
    width: 100,
    dataIndex: 'consumeScore',
    key: 'consumeScore'
  },
  {
    title: '志愿者人数',
    width: 100,
    dataIndex: 'volunteerNum',
    key: 'volunteerNum'
  },
  {
    title: '志愿者奖励积分',
    width: 120,
    dataIndex: 'volunteerScore',
    key: 'volunteerScore'
  },
  {
    title: '活动开始日期',
    width: 100,
    dataIndex: 'startDate',
    key: 'startDate'
  },
  {
    title: '活动结束日期',
    width: 100,
    dataIndex: 'endDate',
    key: 'endDate'
  },
  {
    title: '上课时间',
    width: 100,
    dataIndex: 'courseTime',
    key: 'courseTime'
  },
  {
    title: '课时总数',
    width: 100,
    dataIndex: 'courseNum',
    key: 'courseNum'
  },
  {
    title: '地点',
    width: 100,
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: '适宜人群',
    width: 100,
    dataIndex: 'suitable',
    key: 'suitable',
    scopedSlots: { customRender: 'suitable' }
  },
  {
    title: '儿童年龄范围',
    width: 100,
    dataIndex: 'age',
    key: 'age',
    scopedSlots: { customRender: 'age' }
  },
  {
    title: '是否家长陪同',
    width: 100,
    dataIndex: 'parents',
    key: 'parents',
    scopedSlots: { customRender: 'parents' }
  },
  // {
  //   title: '活动描述',
  //   dataIndex: 'content',
  //   key: 'content'
  // },
  {
    title: '提交时间',
    width: 120,
    dataIndex: 'dateCreated',
    key: 'dateCreated',
    scopedSlots: { customRender: 'dateCreated' }
  },
  {
    title: '状态',
    width: 120,
    dataIndex: 'status',
    key: 'status',
    fixed: 'right',
    scopedSlots: { customRender: 'status' }
  }
]
const operateBtn = [{
  name: 'candidateApplication.pass',
  status: 'status',
  statusValN: ['PASS'],
  id: 'PASS'
}, {
  name: 'candidateApplication.reject',
  status: 'status',
  statusValN: ['NOTPASS'],
  id: 'NOTPASS',
  class: 'red'
}]
const searchListArr = [
  // {
  //   id: 'name',
  //   type: 'input',
  //   name: '姓名'
  // // }, {
  // //   id: 'email',
  // //   type: 'input',
  // //   name: '邮箱'
  // }, {
  //   id: 'phone',
  //   type: 'input',
  //   name: '电话'
  // }
  // {
  //   id: 'enterpriseId',
  //   type: 'input',
  //   name: '单位'
  // }
  // {
  //   id: 'status',
  //   type: 'select',
  //   name: '状态',
  //   values: [{ id: 'ENABLE', name: '启用' }, { id: 'DISABLE', name: '禁用' }]
  // }
]

export default {
  name: 'AcctTable',
  components: { TableOperate, SearchFiled },
  props: ['data', 'pagination', 'loading', 'selectedRowKeys', 'forbidControl', 'overWriteColumns', 'fromPage'],
  data () {
    return {
      moment,
      acctList: [],
      visible: false,
      filterBtn,
      recordBtn,
      columns: JSON.parse(JSON.stringify(this.overWriteColumns || columns)),
      searchListArr: searchListArr.filter(item => this.$store.state.user.userInfo.role === 'ROLE_VENDOR' ? item.id !== 'status' : true),
      operateBtn,
      from: '',
      deliverDate: '',
      searchField: {},
      searchFieldTmp: {},
      valueFileds: null,
      rejectVisible: false,
      rejectIds: [],
      rejectReason: '',
      type: '', // 取消or拒绝
      signCheckList: [], // 选择的要报名的人
      signPersonsList: [], // 已报名的列表
      cancelCheckList: [], // 退课人
      volunteerPersonsList: [{ value: this.$store.state.user.userInfo.id, label: this.$store.state.user.userInfo.name }],
      volunteerCheckList: [],
      curRecord: {},
      popoverVisible: false
    }
  },
  created () {
    // this.getTreelist()
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
    myPersonsList () { // 账号本人 以及 子女
      let childArr = this.userInfo.childList.map(t => {
        return { value: t.id, label: t.name }
      })
      return [{ value: this.userInfo.id, label: this.userInfo.name }, ...childArr]
    },
    getBtn () {
      let isAllPending = true
      let isAllPass = true
      let arr = []
      if (this.selectedRowKeys.length > 0 && !this.forbidControl) {
        arr = this.data.filter(t => this.selectedRowKeys.includes(t.id))
        arr.forEach(t => {
          if (t.auditsStatus !== 'WAIT') {
            isAllPending = false
          }
          if (t.auditsStatus !== 'PASS') {
            isAllPass = false
          }
        })
      }
      if (this.selectedRowKeys.length > 0 && !this.forbidControl && (this.userInfo.role === 'ROLE_ADMIN' || this.userInfo.role === 'ROLE_HRBP')) {
        if (isAllPending) {
          return this.operateBtn.slice(0, 2)
        }
        if (isAllPass) {
          if (arr[0].status === 'ENABLE') {
            return this.operateBtn.slice(2, 3)
          } else {
            return this.operateBtn.slice(3, 4)
          }
        }
      }
      return null
    },
    signList () {
      let signList = []
      if (this.curRecord && this.curRecord.campaignUserInfos && this.curRecord.campaignUserInfos.length) {
        this.curRecord.campaignUserInfos.forEach(t => {
          this.myPersonsList.forEach(m => {
            if ((t.userChildId || t.userId) === m.value) {
              signList.push(m)
            }
          })
        })
      }
      return signList
    },
    signNotVolunteerList () {
      let signNotVolunteerList = []
      if (this.curRecord && this.curRecord.campaignUserInfos && this.curRecord.campaignUserInfos.length) {
        this.curRecord.campaignUserInfos.forEach(t => {
          this.myPersonsList.forEach(m => {
            if ((t.userChildId || t.userId) === m.value && t.type !== 'volunteer') {
              signNotVolunteerList.push(m)
            }
          })
        })
      }
      return signNotVolunteerList
    },
    noSignList () {
      let noSignList = this.myPersonsList.filter(m => !this.signList.find(s => s.value === m.value))
      return noSignList
    }
  },
  mounted () {
    this.columns = JSON.parse(JSON.stringify(this.overWriteColumns || columns))
    if (this.fromPage === 'listManage') {
      this.columns.splice(-4, 0, {
        title: '申请人',
        width: 100,
        dataIndex: 'creator.name',
        key: 'creator.name'
      },
      {
        title: '申请人电话',
        width: 100,
        dataIndex: 'creator.email',
        key: 'creator.email'
      },
      {
        title: '申请人手机',
        width: 110,
        dataIndex: 'creator.phone',
        key: 'creator.phone'
      })
    }
    if (['ROLE_ADMIN', 'ROLE_HRBP'].includes(this.userInfo.role) && this.$route.name === 'scoreAudit') {
      this.columns.splice(-3, 0, {
        title: '上传情况',
        width: 100,
        dataIndex: 'upload',
        key: 'upload',
        fixed: 'right',
        scopedSlots: { customRender: 'upload' }
      })
    } else {
      this.columns.splice(-3, 0, {
        title: '报名情况',
        width: 100,
        dataIndex: 'sign',
        key: 'sign',
        fixed: 'right',
        scopedSlots: { customRender: 'sign' }
      })
      this.columns.push({
        title: '操作',
        width: 200,
        dataIndex: 'action',
        key: 'action',
        fixed: 'right',
        scopedSlots: { customRender: 'action' }
      })
    }
  },
  methods: {
    // async getTreelist () {
    //   // this.loading = true
    //   // this.selectedRowKeys = []
    //   let params = {
    //     status: ''
    //   }
    //   let res = await selectTreeList(params)
    //   if (res.code === 200) {
    //     let arr = []
    //     arr = resizeTree(res.data)
    //     this.searchListArr.some(element => {
    //       if (element.id === 'enterpriseId') {
    //         element.treeData = arr
    //         return true
    //       }
    //     })
    //   } else {
    //     this.$message.error(res.message)
    //   }
    //   if (this.$route.query.enterpriseId) { // 职位界面跳转过来
    //     this.valueFileds = {
    //       enterpriseId: this.$route.query.enterpriseId
    //     }
    //   }
    //   // this.loading = false
    // },
    closeOneField (id) {
      // if (!this.valueFileds) {
      this.valueFileds = {}
      // }
      this.$set(this.valueFileds, id, '')
    },
    onSelectChange (selectedRowKeys, acctList) {
      this.acctList = acctList
      this.$emit('setSelected', selectedRowKeys)
      // this.selectedRowKeys = selectedRowKeys
    },
    clearSearch () {
      this.$refs.TableOperate.clearSearch()
    },
    // 管理员账号 和 会员账号 的启用和禁用
    async updateStatus (status, ids) {
      if (status === 'PASS' || status === 'NOTPASS') {
        this.updateAuditStatus(status, ids)
        return false
      }
    },
    // 批量审核通过或拒绝
    updateAuditStatus (status, ids) {
      let prams = null
      if (status === 'PASS') { // 审核通过
        prams = ids.map(id => {
          return { status, id }
        })
        console.info(prams)
        this.$confirm({
          title: '是否确定通过审核？',
          onOk: async () => {
            let res = await changeCourseAuditStatus(prams)
            if (res.code === 200) {
              this.$message.success('操作成功')
              let pagination = this.pagination
              pagination.current = 1
              this.$emit('update', { searchField: this.searchFieldTmp, pagination })
            } else {
              this.$message.error(res.message)
            }
          },
          onCancel () {
          },
          class: 'test'
        })
      } else { // 审核拒绝
        this.type = 'reject'
        this.rejectIds = ids
        this.rejectVisible = true
      }
    },
    // 取消
    async reject () {
      console.info(this.rejectReason)
      if (!this.rejectReason) {
        this.$message.error(`请填写${this.type === 'cancel' ? '取消' : '拒绝'}原因`)
        return false
      }
      let prams = this.rejectIds.map(id => {
        return { status: this.type === 'cancel' ? 'CANCELLED' : 'NOTPASS', id, reason: this.rejectReason }
      })
      console.info(prams)
      let fn = this.type === 'cancel' ? changeCourseStatus : changeCourseAuditStatus
      let res = await fn(prams)
      if (res.code === 200) {
        this.$message.success(`${this.type === 'cancel' ? '取消' : '拒绝'}成功`)
        let pagination = this.pagination
        pagination.current = 1
        this.$emit('update', { searchField: this.searchFieldTmp, pagination })
      } else {
        this.$message.error(res.message)
      }
      this.rejectVisible = false
    },
    searchFormValue (searchField) {
      this.searchFieldTmp = searchField
      let searchFieldTmp = JSON.parse(JSON.stringify(searchField))
      this.searchField = searchFieldTmp
      searchFieldTmp.key = searchFieldTmp.keyword
      delete searchFieldTmp.keyword
      let pagination = this.pagination
      pagination.current = 1
      this.$emit('update', { searchField: searchFieldTmp, pagination })
    },
    // editAcct (record) {
    //   this.$emit('addAcct', record)
    // },
    changePage (current, pageSize) {
      let pagination = this.pagination
      pagination.current = current
      this.$emit('update', { searchField: this.searchField, pagination })
    },
    setRowClassName (record, index) {
      return index % 2 !== 0 ? 'grey' : ''
    },
    getCheckboxProps (record) {
      console.info(record)
      return {
        props: {
          disabled: record.auditsStatus === 'NOTPASS'
        }
      }
    },
    getSubject (subject) {
      let options = [
        { value: 'science', label: '科学(对应理、工和医学部)' },
        { value: 'humanity', label: '人文(对应人文社科学部)' },
        { value: 'foreignLanguage', label: '外语(对应外国语学院)' },
        { value: 'art', label: '艺术(对应艺术学院)' },
        { value: 'sports', label: '体育(对应体育教研部)' }
      ]
      let str = []
      subject && subject.split(',').forEach(t => {
        options.forEach(o => {
          if (o.value === t) {
            str.push(o.label.slice(0, 2))
          }
        })
      })
      return str.join()
    },
    // 去活动详情页
    toDetail (record) {
      this.$router.push(`/course/courseDetail?id=${record.id}`)
    },
    // 取消课程活动
    async cancelCourse (record) {
      this.type = 'cancel'
      this.rejectIds = [record.id]
      this.rejectVisible = true
    },
    edit (record) {
      this.$router.push(`/course/courseEdit?id=${record.id}`)
    },
    // 报名
    async signUp () {
      let params = []
      if (this.curRecord.checkList && this.curRecord.checkList.length) {
        this.curRecord.checkList.forEach(t => {
          if (t === this.userInfo.id) {
            params.push({ campaignId: this.curRecord.id, userId: t, userChildId: '', type: 'consume' })
          } else {
            this.userInfo.childList.forEach(c => {
              if (t === c.id) {
                params.push({ campaignId: this.curRecord.id, userId: this.userInfo.id, userChildId: t, type: 'consume' })
              }
            })
          }
        })
      } else {
        this.$message.error('请选择报名人员')
        return false
      }
      console.info(params)
      let res = await signUp(params)
      if (res.code === 200) {
        this.$message.success(`报名成功`)
        let pagination = this.pagination
        pagination.current = 1
        this.$emit('update', { searchField: this.searchFieldTmp, pagination })
        this.popoverVisible = false
      } else {
        this.$message.error(res.message)
      }
    },
    // 退课
    async cancelSignUp (isVolunteer) {
      let params = []
      if (this.curRecord.checkList && this.curRecord.checkList.length) {
        params = this.curRecord.campaignUserInfos.filter(t => this.curRecord.checkList.includes(t.userChildId || t.userId)).map(t => { return { id: t.id } })
      } else {
        this.$message.error(`请选择${isVolunteer ? '取消' : '退课'}人员`)
        return false
      }
      console.info(params)
      let res = await cancelSignUp(params)
      if (res.code === 200) {
        this.$message.success(`${isVolunteer ? '取消' : '退课'}成功`)
        let pagination = this.pagination
        pagination.current = 1
        this.$emit('update', { searchField: this.searchFieldTmp, pagination })
        this.popoverVisible = false
      } else {
        this.$message.error(res.message)
      }
    },
    // 成为/取消志愿者
    async signVolunteer (isCancel) {
      if (isCancel) { // 取消志愿者
        this.cancelSignUp('volunteer')
      } else { // 成为志愿者
        let params = []
        if (this.curRecord.checkList && this.curRecord.checkList.length) {
          params = [{ campaignId: this.curRecord.id, userId: this.userInfo.id, userChildId: '', type: 'volunteer' }] // 只有本人才可以申请成为志愿者 子女不行
        } else {
          this.$message.error('请选择人员')
          return false
        }
        console.info(params)
        let res = await signUp(params)
        if (res.code === 200) {
          this.$message.success(`志愿者报名成功`)
          let pagination = this.pagination
          pagination.current = 1
          this.$emit('update', { searchField: this.searchFieldTmp, pagination })
          this.popoverVisible = false
        } else {
          this.$message.error(res.message)
        }
      }
    },
    // 查看报名列表
    toSignList (record) {
      this.$router.push(`/course/courseSighList?id=${record.id}&from=sign`)
    },
    // 查看上传列表
    toUploadList (record) {
      this.$router.push(`/course/courseSighList?id=${record.id}&from=upload`)
    },
    hasSign (record) {
      let signPersonsList = []
      record.campaignUserInfos.forEach(t => {
        this.myPersonsList.forEach(m => {
          if ((t.userChildId || t.userId) === m.value && t.type !== 'volunteer') {
            signPersonsList.push(m)
          }
        })
      })
      return signPersonsList
    },
    // 是否已报名志愿者
    isVolunteer (record) {
      return record.campaignUserInfos.find(t => t.type === 'volunteer' && !t.userChildId && t.userId === this.userInfo.id)
    },
    // 结束招募
    completed (record) {
      let params = [{ status: 'COMPLETED', id: record.id }]
      this.$confirm({
        title: '结束招募活动将按时举办，是否确定？',
        onOk: async () => {
          let res = await changeCourseStatus(params)
          if (res.code === 200) {
            this.$message.success(`操作成功`)
            let pagination = this.pagination
            pagination.current = 1
            this.$emit('update', { searchField: this.searchFieldTmp, pagination })
            this.popoverVisible = false
          } else {
            this.$message.error(res.message)
          }
        },
        onCancel () {
        },
        class: 'test'
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.AcctTable
  :global(.top)
    padding 14px 18px!important
    background #fff
  .errorColor
    color errorColor
  .grey
    color textGrey
  .green
    color lightGreen
  // 表格头部公共写法
  // :global(.ant-table-title)
  //   padding 0
  // :global(.ant-table-thead th)
  //   background none
  //   padding 0
  // :global(.ant-table-thead .ant-table-header-column)
  //   display inline-block
  //   width calc(100% - 16px)
  //   padding 5px 8px
  //   margin 5px 8px
  //   border-right 1px solid borderColor
  // :global(.ant-table-thead th:first-child .ant-table-header-column)
  // :global(.ant-table-thead th:last-child .ant-table-header-column)
  //   border-right none
  // :global(.ant-table-tbody >tr >td)
  //   padding 7px 16px
  //   vertical-align top
  :global(.grey)
    background var(--light-grey)
  .updateText
    margin 0
    font-weight 600
  .update
    // visibility hidden
    margin 6px 0 0
    span
      // display none
      // display inline-block
      cursor pointer
      // border-right 1px solid borderColor
      padding 0
      color var(--blue-500)
      &.red
        color errorColor
      &:first-child
        padding-left 0
      &:last-child:after
        height 0
        // color errorColor
      &:after
        content ''
        vertical-align middle
        background borderColor
        display inline-block
        height 14px
        width 1px
        margin-left 4px
  // :global(.ant-table-row)
  //   margin 0 12px
  // :global(.ant-table-row:hover)
  //   :global(td)
  //   .update
  //     >span
  //       display inline-block
      // visibility visible
.ant-table.ant-table-bordered .ant-table-title
  border none
::v-deep .ant-table-row
  border-bottom 1px solid borderColor
.expand_wrap
  font-size 12px
:global(.ant-dropdown .check_wrap)
  // width 120px
  padding 20px
  background #fff
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
:global(.popover_hide)
  display none
</style>
